<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类参数</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-alert title="注意：只允许为三级分类设置相关参数" type="warning" show-icon></el-alert>
            <el-row>
                <el-col :span="18">
                    <el-form label-width="150px">
                        <el-form-item label="选择商品分类：">
                            <el-cascader :props="{ expandTrigger: 'hover' ,value:'cat_id',label:'cat_name',children:'children'}" 
                            :options="parentCateList" clearable @change="parentCateChanged"></el-cascader>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-tabs type="card" @tab-click="omparams" value="many">
                <el-tab-pane label="动态参数" name="many">
                    <el-row>
                        <el-col>
                            <el-button type="primary" size="small">添加参数</el-button>
                        </el-col>
                    </el-row>
                    <el-table border :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}" stripe :data="paramslist"> 
                        <el-table-column type="expand" width="80px" label="序号"></el-table-column>
                        <el-table-column type="index" width="80px" label="序号"></el-table-column>
                        <el-table-column label="属性名称" prop="attr_name"></el-table-column>
                        <el-table-column label="操作"></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="静态属性" name="only">
                    <el-row>
                        <el-col>
                            <el-button type="primary" size="small">添加属性</el-button>
                        </el-col>
                    </el-row>
                    <el-table border :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}" stripe :data="paramslist"> 
                        <el-table-column type="expand" width="80px" label="序号"></el-table-column>
                        <el-table-column type="index" width="80px" label="序号"></el-table-column>
                        <el-table-column label="属性名称" prop="attr_name"></el-table-column>
                        <el-table-column label="操作"></el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
export default {
    created() {
        this.getParentCateList();
    },
    data() {
        return {
            parentCateList:[],
            current_id:"",
            paramslist:[],
            sel:"many",
        }
    },
    methods: {
        async getParentCateList() {
        const { data: res } = await this.$http.get('categories', {
            params: { type: 3 }
        })
        this.parentCateList = res.data
        },
        parentCateChanged:function(value) {
            console.log(value[value.length-1]);
            this.current_id=value[value.length-1];
            this.getcateparams();
        },
        getcateparams:async function() {
            const {data:res} =await this.$http.get(`categories/${this.current_id}/attributes`,{params:{sel:this.sel}});
            console.log(res);
            this.paramslist=res.data;
        },
        omparams:function(info) {
            if(info.name=="many") {
                this.sel='many';
            }
            else {
                this.sel='only';
            }
        },
    },
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.el-breadcrumb {
    margin-left: 170px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.box-card {
    width: 1200px;
    margin: 0 auto;
}
.el-button {
    margin-bottom: 10px;
}
.el-pagination {
    margin-top: 10px;
}
.el-row .el-form{
    margin-top: 20px;
    margin-left: -40px;
}
.el-cascader {
    width: 300px;
}
</style>